<template>
  <div>
      <el-row class="sp2">
            <el-col :span="24"><font size="6" clore="black">酒店在线预定</font></el-col>
      </el-row>
      <br>
      <el-row :gutter="20">
        <el-col :span="6" v-for="(guest,index) in guestAll" :key="index">
            <div class="father">
                <div class="son">{{guest.state == 0 ? "待订" : "已订"}}</div>
                <img :src="require('../../assets/bed/'+guest.roomimg)" alt="" style="width:100%;height:100%;">
            </div>
            <span class="cl1">价格 : ￥<font color="red">{{guest.roommoney}}</font> <br></span>
            <span class="cl2">最终价格 : ￥<font color="red">{{guest.state == 0 ? guest.shoumoney : "***"}}</font> <br></span>
            <span class="cl2"> 类型 : {{guest.roomname}}<br></span>
            <span class="cl1">楼层 : {{guest.floor}}<br></span>
            <div class="block" style="text-align:center;">
                <el-date-picker
                @change="dd(guest)"
                v-model="guest.value1"
                type="datetimerange"
                align="right"
                start-placeholder="开始日期"
                end-placeholder="离开日期"
                :default-time="['12:00:00', '12:00:00']">
                </el-date-picker>
            </div>
            <el-button type="warning" size="mini" style="display:block;margin:0 auto" @click="reservation(guest)">立即预定</el-button> 
            
        </el-col>
     </el-row>
  </div>
</template>

<script>
import {findAllGuestBook,updateGuest} from '../../api'
export default {
    data() {
        return {
            p(s) {
                return s < 10 ? '0' + s : s
            },
            value1 : '', //时间
            guestAll : [],
            count : 0
        }
    },
    // watch: {
    //   guestAll (newValue, oldValue) {
    //     console.log('时间又过去了1年')
    //     console.log('新值是' + newValue + ',旧值是' + oldValue)
    //     },
    // },
    created() {
        this.findAll()
    },
    methods: {
        dd(guest){
            const d = new Date(guest.value1[0])
            const d1 = new Date(guest.value1[1])
            const resDate = d.getFullYear() + '-' + this.p((d.getMonth() + 1)) + '-' + this.p(d.getDate())
            const resDate1 = d1.getFullYear() + '-' + this.p((d1.getMonth() + 1)) + '-' + this.p(d1.getDate())
            // const resTime = this.p(d.getHours()) + ':' + this.p(d.getMinutes()) + ':' + this.p(d.getSeconds())
            console.info(resDate)
            console.info(resDate1)
            // console.info(resTime)
            const day = this.dateDiff(resDate,resDate1)
            console.info(day)
            guest.shoumoney = guest.roommoney * day
        },
        dateDiff(firstDate,secondDate){
            var firstDate = new Date(firstDate);
            var secondDate = new Date(secondDate);
            var diff = Math.abs(firstDate.getTime() - secondDate.getTime())
            var result = parseInt(diff / (1000 * 60 * 60 * 24));
            return result
        },
        async findAll(){
            let {data:baseRefault} = await findAllGuestBook()
            this.guestAll = baseRefault.data
        },
        async reservation(guest){
            console.info(guest)
            let userid = sessionStorage.getItem('userid')
            if(userid == null || userid == undefined){
                this.$message.error('请先登录！！！')
                this.$router.push('/userLogin')
            }else{
                if(guest.state == 0){
                    if(guest.value1 == undefined || guest.value1 == null){
                        this.$message.error('请填写订购时间！')
                    }else{
                        //订阅房间
                        //userid 用户 
                        // uid
                        //guest.rid
                        guest.uid =  userid                        

                        // console.info(guest.value1[0]._innerDate)
                        // var time = guest.value1[0]._innerDate

                        // var d = new Date(guest.value1[0]._innerDate);  
                        // var youWant ;

                        // youWant=d.getFullYear() + '-' + (d.getMonth() + 1) + '-' + d.getDate() + ' ' + d.getHours() + ':' + d.getMinutes() + ':' + d.getSeconds(); 

                        // console.info(youWant)

                        guest.starttime = guest.value1[0]
                        // console.info(guest.starttime)

                        guest.endtime = guest.value1[1]
                        // console.info(guest.endtime)
                        
                        let {data:baseRefault} = await updateGuest(guest)
                        this.$message.success(baseRefault.message)
                        this.findAll()
                    }
                }else{
                    this.$message.error('房间已被预订！请选择其他房间')
                }
            }
        }
    },
}

</script>

<style>
.sp2 {
    color: #333;
    text-align: center;
    padding-top: 20px;
    font-weight : bold;
  }
  .cl1{
      color: #333;
        text-align: center;
        font-weight : bold;
        padding-left: 150px;
  }
  .cl2{
      color: #333;
        text-align: center;
        font-weight : bold;
        padding-left: 130px;
  }
  .father {
        width: 100%;
        height: 100%;
        background-color: #eee;
        margin: 0px auto;
        position: relative;
        overflow: hidden;
    }
    .son {
        width: 60px;
        height: 40px;
        border-radius: 6px;
        background-color: pink;
        transform: rotate(60deg);
        position: absolute;
        right: -8px;
        top: 0;
        text-align: center;
    }
</style>